import React from 'react'
import './app.css'
import { Layout, Menu } from 'antd'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons'
import { HashRouter as Router, Link, Route, Redirect } from 'react-router-dom'
import routers from './router'

// import Demo from './pages/demo'
// import ShopLayout from './pages/layout'
// import News from './pages/news'

const { Header, Sider, Content } = Layout

class App extends React.Component {

  // constructor(props) {
  //   super(props)
  // }

  state = {
    collapsed: false,
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  }

  menuItemClick = (item) => {
    console.log(item)
  }

  render() {
    return (
      <div className="app">
        <Router>
          <Layout style={{ height: '100%' }}>
            <Sider trigger={ null } collapsible collapsed={ this.state.collapsed }>
              <div className="logo" />
              <Menu theme="dark" mode="inline" defaultSelectedKeys={ ['2'] }>
                {
                  routers.map((item, index) => {
                    return (
                      <Menu.Item
                        key={ index }
                        onClick={ () => this.menuItemClick(item) }
                        icon={ <item.icon /> }
                      >
                        <Link to={ item.path }>{ item.name }</Link>
                      </Menu.Item>
                    )
                  })
                }
              </Menu>
            </Sider>
            <Layout className="site-layout">
              <Header className="site-layout-background" style={{ padding: 0 }}>
                {
                  React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: this.toggle,
                  })
                }
              </Header>
              <Content
                className="site-layout-background"
                style={{
                  margin: '24px 16px',
                  padding: 24,
                  overflowY: 'auto'
                }}
              >
                {/* <Demo /> */}
                {/* <ShopLayout /> */}
                {/* <News /> */}
                {
                  routers.map((item, index) => {
                    return (
                      <Route key={ index } path={ item.path } exact={ item.exact } component={ item.component }></Route>
                    )
                  })
                }
                <Redirect to="/news" />
              </Content>
            </Layout>
          </Layout>
        </Router>
      </div>
    )
  }

}

export default App